<template>
    <div class="app-header">
        <h1 @click="toHome">稿定玄墨</h1>
        <ul>
            <li v-for="(item,index) in MenuBar" :key="index" :class="{active: $route.path.includes(item.path)}" @click="onJump(item)">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'AppHeader',

    computed: {
        MenuBar() {
            return [
                {
                    name: '首页',
                    path: '/home',
                },

                {
                    name: '组件库',
                    path: '/component',
                },

                {
                    name: '笔记',
                    path: '/note',
                },

            ];
        },
    },

    methods: {
        onJump({ path }) {
            this.$router.push({ path });
        },

        toHome() {
            if (this.$route.name === 'home') return;
            this.$router.push({ path: '/home' });
        },
    },
};
</script>

<style lang='scss' scoped>
.app-header {
    background-color: #fff;
    align-items: center;
    display: flex;

    position: fixed;
    top: 0;
    z-index: 101;

    border-bottom: 1px solid #f2f6fc;
    width: 100vw;
    height: 80px;


    h1 {
        margin-right: 150px;
        margin-left: 30px;

        cursor: pointer;
    }

    ul {
        padding: 0;
        li {
            display: inline-block;

            list-style: none;

            position: relative;

            width: 120px;

            text-align: center;

            color: #666;

            cursor: pointer;

            &:hover {
                color: #000;
            }

            &.active::before {
                content: "";

                position: absolute;
                top: 25px;
                left: 37%;

                width: 30px;
                height: 3px;

                background-color: #409eff;
            }
        }
    }
}

</style>
